---
sidebar_position: 6
---

# createAnimatedComponent

`createAnimatedComponent` lets you create an Animated version of any React Native component. Wrapping a component with `createAnimatedComponent` allows Reanimated to animate any prop or style associated with that component.

Reanimated comes with five built-in Animated components:

- `Animated.FlatList`
- `Animated.Image`
- `Animated.View`
- `Animated.ScrollView`
- `Animated.Text`

Rest of the components you might want to animate in React Native have to be wrapped with a `createAnimatedComponent` function.

## Reference

```javascript
import Animated from 'react-native-reanimated';
import { TextInput } from 'react-native';

const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
```

<details>
<summary>Type definitions</summary>

```typescript
function createAnimatedComponent<P extends object>(
  component: ComponentClass<P>
): ComponentClass<AnimateProps<P>>;

function createAnimatedComponent<P extends object>(
  component: FunctionComponent<P>
): FunctionComponent<AnimateProps<P>>;
```

</details>

### Arguments

#### `component`

The component you want to make animatable. Function components have to be wrapped with `React.forwardRef()`.

### Returns

`createAnimatedComponent` returns a component that Reanimated is capable of animating.

## Example

import CreateAnimatedComponent from '@site/src/examples/CreateAnimatedComponent';
import CreateAnimatedComponentSrc from '!!raw-loader!@site/src/examples/CreateAnimatedComponent';

<InteractiveExample
  src={CreateAnimatedComponentSrc}
  component={<CreateAnimatedComponent />}
  showCode
/>

## Platform compatibility

<div className="platform-compatibility">

| Android | iOS | Web |
| ------- | --- | --- |
| ✅      | ✅  | ✅  |

</div>
